<template>
    <view class="list">
        <z-paging
            auto-show-back-to-top
            ref="paging"
            v-model="collectData"
            @query="queryList"
            :fixed="false"
            height="100%"
        >
            <view v-for="item in collectData" :key="item.id" class="card">
                <u-swipe-action
                    :options="options"
                    btn-width="130"
                    @click="collectionCancel(item.id)"
                >
                    <view class="collect flex" @click="toGoodsDetail(item.goodsId)">
                        <view class="image">
                            <u-image :src="item.image" width="140" height="140"></u-image>
                        </view>
                        <view class="flex-1 ml-[20rpx]">
                            <view class="normal font-medium text-xl">{{ item.name }}</view>
                            <view class="mt-[24rpx]">
                                <price :price="item.price" :desc="item.unit"></price>
                            </view>
                        </view>
                    </view>
                </u-swipe-action>
            </view>
        </z-paging>
    </view>

    <!-- empty Start -->
    <view class="empty" v-show="!collectData.length">
        <u-empty
            text="暂无收藏数据～"
            :src="'/static/images/empty/collection.png'"
            :icon-size="300"
            color="#888888"
        ></u-empty>
    </view>
    <!-- empty Start -->
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { apiCollectLists } from '@/api/goods'
import Price from '@/components/price/index.vue'
import { apiGoodsCollectionCancel } from '@/api/goods'

const paging = shallowRef<any>(null)
const collectData = ref<any>([])
const options = ref([
    {
        text: '取消收藏',
        style: {
            backgroundColor: '#F36161'
        }
    }
])
const queryList = async (pageNo = 1, pageSize = 10) => {
    try {
        const { lists } = await apiCollectLists({
            pageNo,
            pageSize
        })
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
// 去商品详情
const toGoodsDetail = (id: number | null) => {
    uni.navigateTo({
        url: `/pages/goods/index?id=${id}`
    })
}
const collectionCancel = async (id: number) => {
    try {
        await apiGoodsCollectionCancel({ id })
        uni.$u.toast('操作成功')
        queryList()
    } catch (error) {
        uni.$u.toast(error)
    }
}

onShow(() => {
    queryList()
})
</script>

<style lang="scss" scoped>
.list {
    height: calc(100vh - env(safe-area-inset-bottom));
    .card {
        border-bottom: solid 1px rgba(242, 242, 242, 1);
        .collect {
            border-radius: 14rpx;
            background-color: white;
            margin: 20rpx 20rpx 0 20rpx;
            padding: 30rpx;
            .image {
                width: 140rpx;
                height: 140rpx;
                flex: 0 0 140rpx;
            }
        }
    }
}

.empty {
    padding-top: 300rpx;
}
</style>
